$(function(){
    layui.use(['laytpl', 'layer','locals'],function(){
        let laytpl = layui.laytpl;
        let layer = layui.layer;
        let locals = layui.locals;

        function getEchartOption(conf){
            let legend = {
                orient: conf.legendorient ||'vertical',
                right: conf.legendx || '3%',
                top: conf.legendy || '3%',
                padding: 0,
                itemWidth: 20,
                itemHeight: 10,
                inactiveColor: '#3a3a3a'
            };
            let opt = {
                lineBar: {
                    title: {
                        text : conf.title || "",
                        left: 'center'
                    },
                    grid: {
                        top: '20%',
                        left: '5%',
                        right: '5%',
                        bottom: '8%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        confine: true
                    },
                    legend: legend,
                    xAxis: [{
                        type: 'category',
                        boundaryGap: conf.type == 'bar',
                        data: conf.xAxis
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: conf.series
                },
                pie: {
                    title: {
                        text : conf.title || "",
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: legend,
                    series: conf.series
                }
            };

            return  ['line','bar'].indexOf(conf.type) == -1 ? opt[conf.type] : opt.lineBar;
        };

        function box1(opt) {
            let myChart = echarts.init(document.getElementById(opt.elm),'jyt-dark');
            let option = {
                title: 'chart-demo-' + opt.type,
                xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                series: [{
                    name: '线A',
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: opt.type,
                    label: {
                        show: true,
                        textStyle: {
                            color: 'inherit'  // 系列色
                        }
                    }
                }],
                type: opt.type
            };
            myChart.setOption(getEchartOption(option));
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function box2(opt){
            let myChart = echarts.init(document.getElementById(opt.elm),'jyt-dark');
            let option = {
                title: '某站点用户访问来源',
                type: opt.type,
                series: [
                    {
                        name: '访问来源',
                        type: opt.type,
                        radius: '50%',
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ]
                    }
                ]
            };
            myChart.setOption(getEchartOption(option));
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        let chartList = [
            {elm: 'chart1', type:'line'},
            {elm: 'chart2', type:'line'},
            {elm: 'chart3', type:'bar'},
            {elm: 'chart5', type:'line'}
        ];
        chartList.forEach((item)=>{
            box1(item);
        });

        box2({elm: 'chart6', type:'pie'});

        function alertList(){
            let data = [{info:'2021/7/10 產品滯留'},{info:'2021/7/11 產品滯留'},{info:'2021/7/12 產品滯留'}];
            let getTpl = $('#alertInfo-tpl').html();
            laytpl(getTpl).render({list: data}, function(html){
                $('.alertList').html(html);
            });
        }

        alertList();

        // 点击弹出二阶页面
        $('.dashboard-page').on('click','.module',function () {
            let id = $(this).attr('id');
            locals.set('parentParams', {id:id});
            let layerIdx = layer.open({
                type: 2,
                title: id + '二阶页面',
                shadeClose: false,
                shade: 0.2,
                area: ['80%', '80%'],
                maxmin: true,
                content: ['/iframePages/secondPage.do', 'no'], //iframe的url
                success: function(layero,index){

                }
            });
            // setTimeout(function () {
            //     layer.full(layerIdx);
            // },3000)
        });
    })
});